<template>
  <div class="ywfx">
    <div class="content">
      <div class="content-left">
        <div class="content-left1">
          <business-total-bar :depCode="depCode" />
        </div>
        <div class="content-left2">
          <days-business :depCode="depCode" />
        </div>
        <div class="content-left3">
          <years-business :depCode="depCode" />
        </div>
      </div>
      <div class="content-right">
        <div class="content-right1">
          <business-type-pie :depCode="depCode" />
        </div>
        <div class="content-right2">
          <today-business-scroll :depCode="depCode" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import businessTotalBar from './businessTotalBar'
import todayBusinessScroll from './todayBusinessScroll'
import daysBusiness from './daysBusiness'
import yearsBusiness from './yearsBusiness'
import businessTypePie from './businessTypePie'
export default {
  components: {
    businessTotalBar,
    todayBusinessScroll,
    daysBusiness,
    yearsBusiness,
    businessTypePie
  },
  props: {
    depCode: {
      type: String
    }
  },
  methods: {}
}
</script>

<style lang='scss'>
.ywfx {
  width: 100%;
  height: calc(100% - 80px);

  .content {
    width: 100%;
    height: 100%;
    padding: 0;
    background-size: 100% 100%;
    display: flex; // 先设置div里的内容显示同一行
    //justify-content: flex-start; // 左右布局
    flex-wrap: wrap; // 换行
    align-content: flex-start; //紧揍排列

    .content-left {
      //background: palevioletred;
      width: calc(65% - 30px);
      margin-left: 15px;
      margin-right: 15px;
      height: 100%;

      .content-left1 {
        //background: darkseagreen;
        width: 100%;
        height: calc(40% - 30px);
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: rgba(1, 35, 102, 0.8);
        //background-color: #012366;
        border-radius: 20px;
        padding: 15px;
      }

      .content-left2 {
        //background: darkseagreen;
        width: 100%;
        height: calc(30% - 15px);
        margin-bottom: 15px;
        background-color: rgba(1, 35, 102, 0.8);
        //background-color: #012366;
        border-radius: 20px;
        padding: 15px;
      }

      .content-left3 {
        //background: darkseagreen;
        width: 100%;
        height: calc(30% - 15px);
        background-color: rgba(1, 35, 102, 0.8);
        //background-color: #012366;
        border-radius: 20px;
        padding: 15px;
      }
    }

    .content-right {
      width: calc(35% - 15px);
      margin-right: 15px;
      height: 100%;

      .content-right1 {
        //background: palevioletred;
        width: 100%;
        height: calc(40% - 30px);
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: rgba(1, 35, 102, 0.8);
        //background-color: #012366;
        border-radius: 20px;
        padding: 15px;
      }

      .content-right2 {
        //background: palevioletred;
        width: 100%;
        height: calc(60% - 15px);
        margin-bottom: 15px;
        background-color: rgba(1, 35, 102, 0.8);
        //background-color: #012366;
        border-radius: 20px;
      }
    }
  }
}
</style>
